<div class="top-options clearfix">
  <form nz-form class="left-options" nzLayout="inline" [formGroup]="searchForm">
    <nz-form-item>
      <nz-form-control>
        <input
          type="text"
          nz-input
          formControlName="name"
          placeholder="按标题搜索"
        />
      </nz-form-control>
    </nz-form-item>
    <nz-form-item>
      <nz-form-control>
        <input
          type="text"
          nz-input
          formControlName="type"
          placeholder="按创建人搜索"
        />
      </nz-form-control>
    </nz-form-item>
    <nz-form-item>
      <nz-form-control>
        <button nz-button nzType="primary">搜索</button>
      </nz-form-control>
    </nz-form-item>
    <nz-form-item>
      <nz-form-control>
        <button nz-button nzType="primary">新增</button>
      </nz-form-control>
    </nz-form-item>
  </form>
</div>

<nz-table [nzData]="treeData" [nzFrontPagination]="false">
  <thead>
    <tr>
      <th>名称</th>
      <th>标题</th>
      <th>数值</th>
      <th>操作</th>
    </tr>
  </thead>
  <tbody>
    <ng-container
      *ngTemplateOutlet="treeTable; context: { $implicit: treeData }"
    ></ng-container>
    <ng-template #treeTable let-nodeList>
      <ng-container *ngFor="let node of nodeList">
        <tr>
          <td
            [nzIndentSize]="20 * node.level"
            [nzShowExpand]="!node.leaf"
            [(nzExpand)]="node.expand"
            (nzExpandChange)="expandNode(node, $event)"
          >
            <span>{{ node.name }}</span>
          </td>
          <td>{{ node.title }}</td>
          <td>{{ node.value }}</td>
          <td>
            <button nz-button nzType="link" (click)="addNode(node)">
              <i nz-icon nzType="plus" nzTheme="outline"></i>
            </button>
            <button nz-button nzType="link" (click)="editNode(node)">
              <i nz-icon nzType="edit" nzTheme="outline"></i>
            </button>
            <button nz-button nzType="link" nzDanger (click)="deleteNode(node)">
              <i nz-icon nzType="delete" nzTheme="outline"></i>
            </button>
          </td>
        </tr>
        <ng-container *ngIf="node.expand">
          <ng-container
            *ngTemplateOutlet="treeTable; context: { $implicit: node.children }"
          ></ng-container>
        </ng-container>
      </ng-container>
    </ng-template>
  </tbody>
</nz-table>
